<template>
    <div class="study h-100">
        <elewarp>
            <span slot="search-header">数据筛选</span>
            <el-form slot="search" :inline="true" :model="search" class="demo-form-inline" ref="searchform">
                <el-form-item label="姓名" prop="bSName">
                    <el-input v-model="search.bSName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="障碍类别" prop="bDisability_Type">
                    <el-select v-model="search.bDisability_Type" placeholder="请选择障碍类别">
                        <el-option :label="item.Code_Name" :value="item.Code_No" :key="item.Code_No" v-for="item in DISABILITY"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="bZt">
                    <el-select v-model="search.bZt" placeholder="请选择状态">
                    <el-option label="在校" value="1"></el-option>
                    <el-option label="离校" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="table-header">
                <span>学生档案</span>
                <el-button style="float: right;">导出</el-button>
                <el-button @click="addStudyInfo" style="float: right; margin-right:10px;" type="primary">添加</el-button>
            </div>
            <div slot="table">
                <!-- 表格 -->
                <el-table
                    ref="table"
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="档案号"
                    prop="FileID"
                    :show-overflow-tooltip="true"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="SName"
                    label="姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="BirthDate"
                    label="年龄"
                    width="80">
                        <template slot-scope="scope">
                            <div>{{scope.row.BirthDate | getAge}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="Sex"
                    label="性别"
                    width="80">
                        <template slot-scope="scope">
                            <div>{{scope.row.Sex | getGender}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="Disability_Type"
                    label="障碍类别"
                    min-width="120">
                        <template slot-scope="scope">
                            <div>{{scope.row.Disability_Type | getDisability_Type(DISABILITY)}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="Class"
                    label="所在班级"
                    min-width="120">
                    </el-table-column>
                    <el-table-column
                    label="在校状态"
                    min-width="120">
                        <template slot-scope="scope">
                            <el-tooltip :content="'在校状态: ' + scope.row.SchoolStatus == '1' ? '在校' : '离校' " placement="top">
                                <el-switch
                                    disabled
                                    v-model="scope.row.SchoolStatus"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-value="1"
                                    inactive-value="0">
                                </el-switch>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    min-width="150">
                        <template slot-scope="scope">
                            <el-button @click="handleClicklook(scope.row)" type="text" size="small"><i class="el-icon-message"></i>查看</el-button>
                            <el-button  @click="handleClickedit(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                            <el-button  @click="handleClickdelete(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom-pages clearfix">
                    <!-- <div class="fl">
                        <el-button  @click="handleClickSelect" >全选</el-button>
                        <el-button  @click="handleClickSelectOther">全反选</el-button>
                    </div> -->
                    <div class="fr">
                        <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5,10, 20, 30, 40]"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next"
                        :total="count">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </elewarp>
        <ele-add-study ref="addstudy" :info="rowInfo" :title="title" :DISABILITY="DISABILITY" @addsuccess="_getStudyList"></ele-add-study>
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
// 添加学生
import eleAddStudy from './add-study.vue';
import {getSysInfo,getstudylist,deletstudylist} from '@/api/index.js'
export default {
    name: 'study',
    components: {
        elewarp,
        eleAddStudy
    },
    data() {
        return {
            search:{
                bSName:'',
                bDisability_Type:'',
                bZt:''
            },
            rowInfo:'',
            title:'',
            pageSize:10,
            count:0,
            tableData:[],
            currentPage:1,
            tableSelection:[],
            DISABILITY:[]
        }
    },
    filters:{
        
    },
    created() {
        this._getSysInfo();
        this._getStudyList();
    },
    methods:{
        onSubmit(){
            this._getStudyList();
        },
        // 获取残疾列表
        _getSysInfo() {
            getSysInfo({bCode_Parent_NO:'DISABILITY'}).then((res) => {
                if(res) {
                    this.DISABILITY = res || [];
                }
            })
        },
        _getStudyList() {
            let params = {
                ...this.search,
                bPage:(this.currentPage - 1) * this.pageSize + 1,
                bPage1:this.currentPage * this.pageSize,
                bSort:'',
                bSx:''
            }
            getstudylist(params).then((res) => {
                if(res) {
                    this.tableData = res.tableData;
                    this.count = res.total_rows;
                }
            })
        },

        onReset(){
            this.$refs.searchform.resetFields();
            this._getStudyList();
        },
        handleSelectionChange(row){
            this.tableSelection = row;
        },
        handleSizeChange(val){
            this.pageSize = val;
            this._getStudyList();
        },
        handleCurrentChange(val){console.log(val)
            this.currentPage = val;
            this._getStudyList();
        },
        // 编辑
        handleClickedit(row){
            this.rowInfo = row;
            this.title = '编辑档案';
            this.$refs.addstudy.dialogVisible = true;
        },
        // 删除
        handleClickdelete(row){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                deletstudylist({bSID:row.SID}).then((res) => {
                    if(res) {
                        this.$util.tipsMsg('success','删除成功！');
                        this._getStudyList()
                    }
                })
            }).catch((err) => {
                console.log(err)
            })
        },
        handleClicklook(row){
            console.log(row)
            this.$router.push({path:'/studyDetails',query:{id:row.SID}})
        },
        // 全选
        handleClickSelect(){
            this.tableData.forEach(row => {
                this.$refs.table.toggleRowSelection(row,true);
            });
        },
        // 全反选
        handleClickSelectOther(){
            this.tableData.forEach(row => {
                this.$refs.table.toggleRowSelection(row);
            });
        },
        // 添加学生
        addStudyInfo(){
            this.rowInfo = "";
            this.title = '新增档案';
            this.$refs.addstudy.dialogVisible = true;
        }
    }
}
</script>
<style lang="less" scoped>

</style>
